<template>
	<div class="newsinfo-container">
		
		<!-- 店铺区 -->
		<div class="header">
			<img :src="newsinfo.images[3]">
		    <div>
			  <h3 class="title">{{ newsinfo.name }}</h3>
		      <div class="discription">
			    <div>
			    	<p>营业时间: <p>
			    	<p class="businessHours">{{ newsinfo.businessHours }}</p>
			    </div>
			    <div>评论次数:{{ newsinfo.comments.length }}</div>	
		      </div>
		    </div>
		</div>
		<hr>
		<div>
			<p>电话：{{ newsinfo.phone }}</p>
			<p>地址：{{ newsinfo.address }}</p>
		</div>


		<!-- 评论区 -->
		<comments-box :newsinfo="newsinfo"></comments-box>

	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import comment from '../subcomponents/comment.vue'

	export default {
		data(){
			return{
				id:this.$route.params.id,
				newsinfo:{},
				
			}
		},
		methods:{
			getNewsInfo(){
				//vue-resource的ajax地址不能以“/”开头
				this.$http.get("1/shops?id="+this.id).then((result)=>{					
					if(result.body){
						console.log(result.body);
						this.newsinfo = result.body[0];
						
					}else{
						Toast("加载轮播图失败！")
					}
				})
			}
		},
		created(){
			this.getNewsInfo();
		},
		components:{
			"comments-box":comment
		}
	}
</script>

<style lang="scss" scoped>
	.newsinfo-container {
		padding:0px 4px;

		/*店铺区样式*/
		.header {
			display: flex;
			justify-content:space-between;

			img {
			  width: 100px;
			  height: 100px;
			  background-color: pink;
			  margin-top: 10px;
		    }

		    .title {
		      font-size: 16px;
		      text-align: center;
		      margin: 15px 0px;
		      color: red;			
		    }
		    .discription {
		      font-size: 14px;
		      color: #226aff;
		      display: flex;
		      justify-content:space-between;
    
		    	.businessHours {
		    		color:red;
		    		font-size: 13px;
		    	}
		    }
		}


		
	}
</style>